<template>
  <div id="fullScreenElem">
    <el-row :gutter="24">

      <el-col :span="24">
        <el-card style="margin-bottom: 10px">
          
          试卷总分：{{totalScore}}

          <el-button style="float: right; margin-top: -10px" icon="el-icon-circle-close" size="mini" @click="exitOut">退出</el-button>
          <el-button style="float: right; margin-top: -10px" type="primary" size="mini" :loading="loading" @click="changeShowAll">
            切换阅览模式
          </el-button>
        </el-card>
      </el-col>
 
      <div v-if="!showAll">

        <!-- 题目卡片 -->
        <el-col :span="6" :xs="24" style="margin-bottom: 10px">

          <el-card>

            <p class="card-title">试题卡</p>
            <el-row :gutter="24" class="card-line" style="padding-left: 10px">
              <el-tag type="info">0分</el-tag>
              <el-tag type="warning">不太理想</el-tag></el-tag>
              <el-tag type="success">满分</el-tag>
            </el-row>

            <div v-for = "(questions,qType ,i) in paperData" :key="i">
              <p class="card-title">{{questionType(qType)}}</p>
              <el-row :gutter="24" class="card-line">
                <el-tag  v-for="(q,j) in questions" :key="j" :type="cardItemClass(q.stuScore,q.score,q.id)" @click="handSave(q)"> {{ q.tiNumber }}</el-tag>
              </el-row>
            </div>

          </el-card>

        </el-col>

        <!-- 正中央一道题显示界面 -->
        <el-col :span="18" :xs="24">

          <el-card class="qu-content">
            <p v-if="cardItem">{{ cardItem.tiNumber}}.(分值{{cardItem.score}})
              <span v-html="cardItem.name"></span>
            </p>
            <!-- 答案区域 -->
            <h4>参考答案：</h4><span v-html="cardItem.answer?cardItem.answer:'无参考答案'"></span><br>
            <h4>学生提交答案：</h4><span v-html="cardItem.stuAnswer?cardItem.stuAnswer:'无答案'"></span><br>
            <!-- 评分区 -->
            <div style="text-align:center">
              得分：
              {{cardItem.stuScore!=null?cardItem.stuScore:0}} 分
            </div>
          </el-card>
          
          <!-- 切换题目按钮 -->
          <div style="margin-top: 20px">
            <el-button v-if="showPrevious" type="primary" icon="el-icon-back" @click="handPrevious()">
              上一题
            </el-button>

            <el-button v-if="showNext" type="warning" icon="el-icon-right" @click="handNext()">
              下一题
            </el-button>

          </div>

        </el-col>

      </div>

      <!-- 总览 -->
      <div v-else style="padding: 10px 5%" class="box-card">
        <!-- 试卷展示 -->
        <div v-for = "(questions,qType ,i) in paperData" :key="i">
            <hr>
            <h4>{{questionType(qType)}}</h4> 
            <el-card  v-for="(q,j) in questions" :key="j" style="padding: 10px 20px">
                <el-divider><span style="color: rgb(239,160,48)">(分值：{{q.score}})</span></el-divider>
                <p class="title">第{{j+1}}题</p>
                <span class="title" v-html="q.name" style="margin: 20px"></span>
                <br>
                <br>
                <p>参考答案：</p>
                <span v-html="q.answer?q.answer:'无参考答案'" style="margin: 20px"></span>
                <br>
                <p>学生答案：</p>
                <span v-html="q.stuAnswer?q.stuAnswer:'无答案'" style="margin: 20px"></span>
                <p>得分：</p>
                <span style="margin: 20px">{{q.stuScore!=null?q.stuScore:0}} 分</span>
            </el-card >
        </div>
        <!-- 按钮 -->
        <div style="text-align:center">
          <el-button type="success" icon="el-icon-check" size="mini" @click="changeShowAll">切换阅览模式</el-button>
          <el-button icon="el-icon-circle-close" size="mini" @click="exitOut">退出</el-button>
        </div>
      </div>

    </el-row>
  </div>
</template>

<script>
import { getStudentId } from '@/api/user'
export default {
  name:'oldPaperDetail',
  data() {
    return {
      exam_info:{},
      // 全展示
      showAll:false,
      // 提交试卷按钮转圈圈
      loading: false,
      //上一道题，下一道题按钮显示问题
      showPrevious: false,
      showNext: true,
      // 当前答题卡
      cardItem: {},
      // 题目总数组
      allItem:[],
      // 试卷信息
      paperData: {},
      // 存储一下题型字典
      typeList:[],
      // 试卷分数
      totalScore:0,
      // 学生id
      studentId:'',
    }
  },
  mounted() {
    this.exam_info = JSON.parse(this.$route.query.exam_info);
    this.getTypeList();
    this.getPaperData();
  },
  methods: {
    // 退出错题界面
    exitOut(){
      this.$router.go(-1);
    },
    // 计算总分
    getTotalScore(){
      let totalScore = 0

      this.allItem.forEach(function(item) {
        if (item.stuScore!=null) {
          totalScore += item.stuScore
        }
      })
      return totalScore
    },
    // 改变全览的状态
    changeShowAll(){
      this.showAll = !this.showAll;
    },
    // 拿一道题目
    fetchData(item){
      // 获得详情
      this.cardItem = item;
    },
    // 通过题目选项卡切换，趁机保存答案
    handSave(item) {
      // 第一题，不显示pre按钮
      if (item.id === this.allItem[0].id) {
        this.showPrevious = false
      } else {
        this.showPrevious = true
      }

      // 最后一个索引
      const last = this.allItem.length - 1
      // 最后一道题，应该不能有next按钮
      if (item.id === this.allItem[last].id) {
        this.showNext = false
      } else {
        this.showNext = true
      }
      
      // 切换当前显示题目的内容
      this.fetchData(item);
      
    },
    // 答题卡样式
    cardItemClass(stuScore,score,currentId) {
      //这玩意是一次性遍历所有题目，检测的
      //这个状态是当前选中的题目编号，会变成warning色
      if (currentId === this.cardItem.id) {
        return 'danger'
      }

      if (stuScore==0||stuScore==null) {  //0分
        return 'info'
      }else if (stuScore<score/2) {       //没拿到题目一半的分数
        return 'warning'
      }else if (stuScore==score) {        //满分题目
        return 'success'
      }
    },
    // 返回题目的类型
    questionType(q){
        return this.typeList[q*1-1].type;
    },
    // 获得题型字典
    async getTypeList() {
      //获取专业分类的请求，不需要携带参数
      let result = await this.$API.coming_exam.reqGetTypeList();
      if(result.code==20000){
        this.typeList = result.data.typeList;
      }
    },
    // 获得试卷信息
    async getPaperData(){
      let result2 = await getStudentId();
      let result = await this.$API.myGrade.getMarkedPaper(this.exam_info.id,this.exam_info.paperId,result2.data.studentId);
      if(result.code==20000){
        this.paperData = result.data.question;
        // 获得第一题内容
        for(var i=0;i<this.typeList.length;i++){
          // 获取键key
          var key = this.typeList[i].id;
          // 寻找第一个有题目的题目类型
          if (this.paperData[key]) {
            this.cardItem = this.paperData[key][0];
            break;
          }
        }

        // 想要保存所有题目
        const that = this
        // 这么做的无奈之处是，马子说题型万一动起来了咋办，键key我假装不知道，循环处理
        var indexNum = 1;
        for(var i=0;i<this.typeList.length;i++){
          // 获取键key
          var key = this.typeList[i].id;
          if(this.paperData[key]){
            this.paperData[key].forEach(function(item) {
              that.allItem.push(Object.assign(item,{tiNumber:indexNum}));
              indexNum++;
            })
          }
        }

        // 计算分数
        this.totalScore = this.getTotalScore();
        // 逻辑上这时去渲染题目
        this.fetchData(this.cardItem);
      }
    },
    // 下一道题响应函数
    handNext(){
      const index = this.cardItem.tiNumber
      this.handSave(this.allItem[index])
    },
    // 上一道题响应函数
    handPrevious(){
      const index = this.cardItem.tiNumber - 2
      this.handSave(this.allItem[index])
    },
  },
}
</script>

<style>
.title{
  font-size: 19px;
  font: bold;
}
.qu-content div{
    line-height: 30px;
}
.card-title{
    background: #eee;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
}
.card-line{
  padding-left: 10px
}
.card-line span {
  cursor: pointer;
  margin: 2px;
}
</style>